<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>背景管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div>

    </div>
    <div class="" v-if="!isEdit">
      <div class="ok-white ok-info" style="min-height: 500px;margin-top: 20px">

        <div class="ok-article-body">
          <div style="text-align: center;font-size: 22px; margin-bottom: 20px;position: relative">
            {{ info.infoTypeName }}详情
            <div style="position: absolute;top: 0;right: 0">
              <el-button type="primary" @click="isEdit=true" size="small">编辑</el-button>
            </div>
          </div>
          <div class="line-1"></div>
          <div style="padding: 40px 120px 40px 120px;text-align: left">
            <div v-html="info.intro"></div>
          </div>
        </div>
      </div>
    </div>



    <div class="" v-if="isEdit">
      <div class="ok-white ok-info" style="min-height: 500px; margin-top: 20px">
        <div>
          <div>
            <div style="text-align: center;font-size: 22px; margin-bottom: 20px;position: relative">
              {{ info.infoTypeName }}编辑
              <div style="position: absolute;top: 0;right: 0">
                <el-button type="primary" @click="editInfo" size="small">保存编辑</el-button>
              </div>
              <div style="position: absolute;top: 0;left: 0">
                <i class="el-icon-back" @click="isEdit=false" style="cursor: pointer"></i>
              </div>
            </div>
          </div>
        </div>
        <Editor v-model="formData.intro"></Editor>
      </div>
    </div>
  </div>
</template>
<script>
import api from"@/api/manage"
import Editor from "@/components/InfoEditor.vue";
import Cookies from "js-cookie";
import ok from "@/assets/ok";
export default {
  components: {Editor},
  data(){
    return{
      info:{},
      formData:{},
      isEdit:false
    }
  },
  mounted() {
    this.getInfo();
    this.checkLogin();
  },
  methods:{
    checkLogin(){
      if (!ok.tool.getStatus()){
        this.$router.push("/login")
      }
    },
    getInfo(){
      api.getInfo({type:"background"}).then(res =>{
        this.info = res.result;
        this.formData = this.info;
      })
    },
    editInfo(){
      this.$confirm('是否保存完成编辑', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.editInfo(this.formData).then(res =>{
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          this.getInfo();
          this.isEdit = false;
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        });
      });

    }
  }
}
</script>
<style>

</style>
